<template>
    <div class="login_contain">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>

            <!-- 表单区域 -->

            <el-form label-width="0px" class="login_form" ref="formRef" :model="temp" :rules="loginrules">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input :prefix-icon="Avatar" v-model="temp.username" placeholder="Please input username">
                    </el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type='password' v-model="temp.password"
                        placeholder="Please input password"></el-input>
                </el-form-item>

                <!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="SubmitForm">登录</el-button>
                    <el-button type="info" @click="resetloginform">重置</el-button>
                </el-form-item>


            </el-form>



        </div>

    </div>
</template>     


<script setup >
import { ref, reactive } from 'vue'
import { Avatar, Lock } from '@element-plus/icons-vue'    //图标显示引用
import { Login } from '../api/index'               //封装的axios的函数
import { useRouter } from 'vue-router'               //引入 路由

import { ElMessage } from 'element-plus'
import axios from 'axios'


const router = useRouter();                  //实例化

//默认值  ,接受的是一个对象,绑定数据 ,或者是使用下面的export default
const temp = reactive({
    username: 'root',
    password: '12345678hjw123'
})



//   校验信息,如果不按照规则填写,就会有提示 ,在item中定义 prop = name/passwd 来进行校验 
const loginrules = reactive({
    name: [
        {
            required: true,            //是否是必须的
            message: 'Please input name',
            trigger: 'blur',       //离开这个焦点的时间触发
        },
        {
            min: 3,
            max: 15,
            message: 'Length should be 3 to 15',
            trigger: 'blur',
        },
    ],
    passwd: [
        {
            required: true,
            message: 'Please select  passwd',
            trigger: 'blur',
        },
        {
            min: 3,
            max: 15,
            message: 'Length should be 3 to 15',
            trigger: 'blur',
        }
    ]

})


//触发 提交的方法
const formRef = ref(null);     // 创建dom 引用

function resetloginform() {
    console.log('reset--->', formRef)
    formRef.value.resetFields()

}



// 登录
function SubmitForm() {

    console.log("formref value -->", formRef.value);

    formRef.value.validate(isValid => {       //校验
        if (isValid)      //校验完成了
        {
            console.log('带入参数--->', temp)

            // getToken(temp).then().catch()
            // https://juejin.cn/post/7221154297707003965   参考举例
            // axios.get("/api/get/user").then(
            //     res =>{
            //         console.log(res);
            //         // 登录验证 ,通过继续 
            //         router.push({name:'home'})
            //     }
            // )

            // 首先要登录 ,然后在获取token 进行请求
            // getToken(temp).then(
            //     res => {
            //         console.log('gettoken');
            //         console.log(res);
            //         //  router.push("/home") 
            //         //    router.push("/overview")     
            //         // userInfo().then(res => {
            //         //     // let code = res['data']   //对返回的 对象解构
            //         //     // console.log("response:", res['data']['code'])
            //         //     console.log(res);

            //         //     if (errorCode === 200) {
            //         //         //跳转到首页去
            //         //         console.log("success")
            //         //         ElMessage({
            //         //             message: '登录成功 !',
            //         //             type: 'success',
            //         //         })
            //         //         // 1.登录成功后 ,将获取到的服务器上的token保存到客户端的sessionstorge中
            //         //         // 1.1项目中除了登录之外的其他的接口 ,必须在登录后才能进行访问 
            //         //         // 1.2 token只能在当前打开的网站期间生效 ,所以保存在sessionstorage中
            //         //         window.sessionStorage.setItem('token', res.data.token)

            //         //         //2通过编程 导航到后台主页 ,路由地址是/overview  
            //         //         router.push("/overview")
            //         //     } else {
            //         //         //失败的情况下 ,返回到登录界面
            //         //         ElMessage({
            //         //             message: '登录失败 !',
            //         //             type: 'success',
            //         //         })
            //         //         //  ElMessage.error('账户或者密码错误 ,请重新登录')
            //         //         router.push("/")


            //         //     }
            //         // })
            //     }
            // )
            // 登录验证 ,通过继续 
            // router.push({name:'home'})
            Login(temp).then(
                res => {
                    console.log("return message :", res.data['code'] )
                    // router.push({name:'home'})

                    if (res.data['code'] === 0) {
                        ElMessage({
                            message: res.data['message'],
                            type: 'success',
                        })
                        // 这里是跳转的路由  
                        // console.log("will push to test"); 
                        router.push({ name: 'home' })
                    } else {
                        ElMessage({
                            message: res.data['message'],
                            type: 'info',
                        })
                    }
                }
            ).catch(
                err => {
                    ElMessage({
                        message: res.data['message'],
                        type: 'error',
                    })
                    console.log("login failed");
                }
            )

        }
        else {
            console.log("fail")
            router.push("/")
            // return false
        }

    })




}
</script>

<style lang="less" scoped>
//scoped控制组件的生效区间,只在当前组件使用,去掉就会添加到其他区间
.login_contain {
    background-color: #2b4b6b;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    background-color: aliceblue;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd; //阴影 
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btns {
    display: flex;
    justify-content: flex-end;
}
</style>